<template>
    <div>
        <div id="meter" class="grid grid-cols-4 gap-5">
            <Meter :newlyAddedNumber="1627" :total="169889" title="用户数" icon="user"></Meter>
            <Meter :newlyAddedNumber="121780" :total="123322122" title="盈利" icon="money"></Meter>
            <Meter :newlyAddedNumber="178940" :total="169889314" title="交易额" icon="aTurnover"></Meter>
            <Meter :newlyAddedNumber="3290" :total="169889" title="订单完成量" icon="numberOfCompletedOrders"></Meter>
        </div>

        <div class="data-container flex items-center h-[50vh] my-4 flex-wrap">
            <div class="data-info h-full flex flex-col flex-1 bg-white p-4 mr-4">
                <TopNav title="用户数据"></TopNav>
                <UserInfo></UserInfo>
            </div>
            <div class="data-info h-full flex-1 bg-white p-4">
                <TopNav title="订单数据"></TopNav>
                <OrderInfo></OrderInfo>
            </div>
        </div>

        <div class="w-full h-[500px]">
            <div class="w-full h-full bg-white p-4">
                <TopNav title="订单数据分析"></TopNav>
                <OrderData></OrderData>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Meter from './components/Meter.vue';
import TopNav from './components/TopNav.vue';
import UserInfo from './components/UserInfo.vue';
import OrderInfo from './components/OrderInfo.vue';
import OrderData from './components/OrderData.vue';

import { GetDashboardData } from '@/api/dashboard';

const getDashboardData = async () =>{
    const res = await GetDashboardData()
    console.log(res);
    
}

onMounted(() => {
    getDashboardData()
})
</script>

<style scoped lang="scss">
@media (max-width: 1320px) {
    .data-info {
        width: 100%;
        height: 55vh;
        flex: none;
        margin-bottom: 20px;
    }
    .data-container{
        height: auto;
    }
}
@media (max-width: 1240px) {
    #meter{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px) {
    #meter{
        grid-template-columns: 1fr;
    }
}
</style>